<!-- 收费员报表 -->
<template>
  <div class="common-body-wrapper" v-cloak>
    <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" @handleChange="handleSearchChange2" :isNeedTree="true" :isCheckbox="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>

    <!--按钮-->
    <div class="operate-btn-group">
      <a class="ake_btn ake_btn_text" @click.prevent="reBuild()" v-if="isPermmited('REPORT:INCOMESUMMARY:REBUILD')">重新生成</a>
    </div>

    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <div class="incomeContentBox" v-if="!isReload">
          <div class="echartsBox">
            <div class="itemBox itemBox-dataDetial">
              <div class="dataDetial">
                <div class="imgBox">
                  <img src="../../assets/img/ic_money.png" alt="">
                </div>
                <div class="dataBox">
                  <p class="val">{{reportMsg.tradeAmount | numFilter}}</p>
                  <p class="name">交易金额（元）</p>
                  <p class="compareVal" v-if="reportMsg.tradeAmountHB==0" style="color: rgba(12,12,12,0.64);">环比{{reportMsg.tradeAmountHB}}</p>
                  <p class="compareVal" v-if="reportMsg.tradeAmountHB>0" style="color:red">环比+{{reportMsg.tradeAmountHB | toFixed}}</p>
                  <p class="compareVal" v-if="reportMsg.tradeAmountHB<0" style="color:green">环比{{reportMsg.tradeAmountHB | toFixed}}</p>
                </div>
              </div>
              <div class="dataDetial">
                <div class="imgBox">
                  <img src="../../assets/img/ic_trade.png" alt="">
                </div>
                <div class="dataBox">
                  <p class="val">{{reportMsg.tradeCount | numFilter}}</p>
                  <p class="name">交易次数（次）</p>
                  <p class="compareVal" v-if="reportMsg.tradeCountHB==0" style="color: rgba(12,12,12,0.64);">环比{{reportMsg.tradeCountHB}}</p>
                  <p class="compareVal" v-if="reportMsg.tradeCountHB>0" style="color:red">环比+{{reportMsg.tradeCountHB | toFixed}}</p>
                  <p class="compareVal" v-if="reportMsg.tradeCountHB<0" style="color:green">环比{{reportMsg.tradeCountHB | toFixed}}</p>
                </div>
              </div>
              <div class="dataDetial">
                <div class="imgBox">
                  <img src="../../assets/img/ic_parking.png" alt="">
                </div>
                <div class="dataBox">
                  <p class="val">{{reportMsg.totalParkingCount | numFilter}}</p>
                  <p class="name">日均总停车数（辆）</p>
                  <p class="compareVal" v-if="reportMsg.parkVelocityColor==0" style="color: rgba(12,12,12,0.64);">车场周转率{{reportMsg.parkVelocity}}次</p>
                  <p class="compareVal" v-if="reportMsg.parkVelocityColor==1" style="color:red">车场周转率{{reportMsg.parkVelocity}}次</p>
                  <p class="compareVal" v-if="reportMsg.parkVelocityColor==-1" style="color:green">车场周转率{{reportMsg.parkVelocity}}次</p>
                </div>
              </div>
            </div>
            <div class="itemBox itemBox-echart">
              <p class="echartTitle">收入构成</p>
              <div class="selectBox">
                <p class="selectItem" :class="{active:5==pieActive}" @click="changePieData(5)">总金额</p>
                <p class="selectItem" :class="{active:0==pieActive}" @click="changePieData(0)">月票</p>
                <p class="selectItem" :class="{active:1==pieActive}" @click="changePieData(1)">临停</p>
                <p class="selectItem" :class="{active:2==pieActive}" @click="changePieData(2)">优惠券</p>
                <p class="selectItem" :class="{active:3==pieActive}" @click="changePieData(3)">共享</p>
                <p class="selectItem" :class="{active:4==pieActive}" @click="changePieData(4)">预订</p>
              </div>
              <div v-show="pieOption.series[0].data.length>0" class="pieBox" id="pieBox" key="pieBox"></div>
              <div v-show="pieOption.series[0].data.length>0" class="legendBox">
                <ul>
                  <li v-for="(item,index) in pieOption.series[0].data" class="item-li" :key="index">
                    <div class="colorBox">
                      <span class="legendRect" v-bind:style="{ background: pieOption.color[index]}"></span>
                      <span class="legendText">{{item.name}}</span>
                    </div>
                    <div class="msgBox">
                      <span class="legendPer">{{PiePersenArr[index]}}</span>
                      <span class="legendNum">{{item.value | numFilter}}</span>
                    </div>
                  </li>
                </ul>
              </div>
              <div v-show="pieOption.series[0].data.length==0" class="noData" key="noData">暂无数据</div>
            </div>
            <div class="itemBox itemBox-echart">
              <p class="echartTitle">收入趋势</p>
              <div v-show="lineOption.series[0].data.length>0" class="lineBox" id="lineBox"></div>
              <div v-show="lineOption.series[0].data.length==0" class="noData" key="noData">暂无数据</div>
            </div>
          </div>
          <div class="tableBox">
            <el-table :data="parkIncomeData.tbBody" stripe border style="width: 100%">
              <template v-for="(item,index) in parkIncomeDataTheads">
                <el-table-column :label="item.label" :key="index" v-if="item.propName!=='subTable'">
                  <template slot-scope="scope">
                    <span v-if="'reno' == item.propName">{{ scope.$index + 1 }}</span>
                    <span v-else>{{scope.row[item.propName]}}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="item.label" :key="index" v-else>
                  <template v-for="(subItem,subIndex) in item.child">
                    <el-table-column :label="subItem.label" :key="subIndex">
                      <template slot-scope="scope">
                        <span>{{scope.row[subItem.propName] | numFilter}}</span>
                      </template>
                    </el-table-column>
                  </template>
                </el-table-column>
              </template>
            </el-table>
            <div class="paginationBox">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="parkIncomeData.page" :page-sizes="[10, 20, 50, 100]" :page-size="parkIncomeData.rp" layout="total, sizes, prev, pager, next, jumper" :total="parkIncomeData.total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
// 引进vue的js
import incomeSummaryReport from "./js/incomeSummaryReport.js";

export default {
  name: 'incomeSummaryReport',
  mixins: [common, stardardList, invokeModal, incomeSummaryReport],
  data() {
    var today = new Date(moment().subtract(1, 'days').format('YYYY-MM-DD 00:00:00'));
    return {
      total: 0,
      fixedCols: 0,
      paramName: "parkIds",
      searchList: [
        {
          index: 0,
          isShow: true,
          type: "select",
          name: "reportDimension",
          text: "时间维度",
          value: "0",
          isHandleChange: true,
          options: [
            { name: "日报", value: "0" },
            { name: "月报", value: "1" },
            // { name: "年报", value: "year" },
            // { name: "自定义", value: "custom" }
          ]
        },
        {
          index: 1,
          format: "yyyy-MM-dd",
          isShow: true,
          isSingle: true,
          type: "datePicker",
          flag: 'date',
          pickerType: "date",
          name: "dateFromTo",
          propName: "fromDate,toDate",
          text: "日期",
          value: today,
          style: { width: "180px" },
          pickerOptions: {
            disabledDate: this.disabledDate
          }
        },
      ]
    };
  },
  filters: {
    formatBillStatus: function(billStatus) {
      return billStatus == 2 ? "已支付" : "未支付";
    }
  }
};
</script>

<style lang="less">
.incomeContentBox .el-table td,
.incomeContentBox .el-table th {
  padding: 0px 16px;
  height: 34px;
  max-height: 34px;
  .cell {
    white-space: nowrap;
  }
}
</style>

<style lang="less" scoped>
.operate-btn-group{
  padding-left: 16px;
}

.incomeContentBox {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.paginationBox {
  padding: 20px;
  text-align: center;
}
.echartsBox {
  display: flex;
  background: #f1f1f1;
  margin-bottom: 20px;
  border-radius: 6px;
  padding: 36px 20px;

  .itemBox {
    height: 350px;
    display: flex;
    flex-direction: column;
    margin: 0 10px;
  }
  .itemBox-dataDetial {
    justify-content: space-between;
    width: 230px;
    .dataDetial {
      display: flex;
      justify-content: center;
      .dataBox {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        background: #fff;
        .val {
          font-size: 26px;
          color: #1f283c;
        }
        .name {
          font-size: 12px;
          color: rgba(25, 33, 51, 0.56);
        }
      }
      .imgBox {
        width: 90px;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #7bbdcf;
        img {
          width: 45px;
          height: 45px;
        }
      }
    }
  }
  .itemBox-echart {
    position: relative;
    flex: 1;
    background: #fff;
    padding: 16px;
    font-size: 12px;
    .echartTitle {
      font-size: 14px;
      color: #4f7d89;
      margin-bottom: 10px;
    }
    .selectBox {
      display: flex;
      flex-direction: column;
      position: absolute;
      right: 16px;
      z-index: 120;
      .selectItem {
        padding: 5px 10px;
        margin: 2px;
        background: #ccc;
        cursor: pointer;
        &.active {
          background: #508ce4;
          color: #fff;
        }
      }
    }
    .legendBox {
      padding: 10px;
      background: #f4f4f4;
      ul {
        display: flex;
        flex-direction: column;
        .item-li {
          display: flex;
          justify-content: space-between;
          list-style-type: none;
          div {
            display: flex;
            justify-content: center;
            align-items: center;
            .legendRect {
              display: inline-block;
              width: 15px;
              height: 15px;
              background: red;
              margin-right: 10px;
            }
            .legendNum {
              margin-left: 10px;
              width: 69.99px;
              text-align: right;
              color: rgba(12, 12, 12, 0.84);
            }
          }
        }
      }
    }
    .lineBox {
      flex: 1;
      width: 100%;
    }
    .pieBox {
      flex: 1;
      width: 100%;
    }
    .noData {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26px;
      color: #999;
      flex: 1;
    }
  }
}
</style>
